<template>
  <div class='header'>
    <ul>
      <!-- <router-link  to="/html" tag='li' :class="[{'currency':full}]">html5</router-link > -->
      <router-link  to="/html" tag='li'>html5</router-link >
      <router-link  to="/css" tag='li'>css</router-link>
      <router-link  to="/js" tag='li'>javasrcipt</router-link>
      <router-link to="/node" tag='li'>node</router-link>
      <router-link to="/vue" tag='li'>vue</router-link>
    </ul>
  </div>
</template>
<script>
export default {
     data () {
            return {
               full:true,
            }
        },
        // watch:{
        //   '$route.path':function (newVal,oldVal) {
        //        if(newVal=='/'){
        //          this.full=true
        //        }else{
        //          this.full=false
        //        }
        //   }
        // }
}
</script>

<style lang="scss" scoped>
.header{
  cursor: pointer;
  ul{
      display: flex;
      height: 40px;
      width:100%;
      background: #68ef50;
      line-height: 40px;
      padding-left:100px;
      li{
        width:80px;
        font-size: 15px;
      }
  }
}
.currency{
    border-bottom:2px solid red;
}
</style>
